<template>
  <div class="shopticket">
    <Header>
      <template slot="left">
        <p>
          <svg-icon iconClass="back" @click="$router.go(-1)"/>
        </p>
      </template>
      <template slot="center">
        <p>我的优惠券</p>
      </template>
      <template slot="right">
        <p></p>
      </template>
    </Header>
    <main>
      <van-tabs v-model="active" sticky @click="change">
        <van-tab v-for="(item,index) in dataList" :title="item.title" :key="index">
          <div class="item_ticket" v-for="(ite,ind) in item.children" :key="ind">
            <div class="item_ticket_left">
              <p>￥<span>{{ite.killprice}}</span></p>
              <p>无门槛</p>
            </div>
            <div class="item_ticket_center">
              <p>【{{ite.type}}】{{ite.price}}无门槛红包</p>
              <p><span>{{ite.starttime |changeTime}}</span>-<span>{{ite.endtime|changeTime}}</span></p>
            </div>
            <button>去使用</button>
          </div>
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleList: [
        {
          title: '未使用',
          num: 0,
        },
        {
          title: '已使用',
          num: 1,
        },
        {
          title: '已过期',
          num: 2,
        },
      ],
      active: 0,
      dataList:[]
    }
  },
  created() {
    this.$api.shopTicket().then((res) => {
      this.dataList=res.list
      console.log(this.dataList, 'res')
    })
  },
  methods: {
    change() {
      console.log(this.active)
    },
  },
  filters: {
    changeTime(val){
      return new Date(val).toLocaleDateString();
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/css/style.scss";
.shopticket {
  width: 100%;
  height: 100%;
  touch-action: none;
  main{
    .item_ticket{
      width: 95%;
      height: px2rem(120);
      font-size: px2rem(16);
      background: #eee;
      margin:  px2rem(15) auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: px2rem(13);
      line-height: px2rem(30);
      padding: 0 px2rem(10);
      .item_ticket_left{
        p span{
          font-size: px2rem(22);
        }
      }
      .item_ticket_center{
        margin-left: px2rem(5);
        line-height: px2rem(40);
      }
    }
  }
}
</style>
